<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>web09</title>
        <meta name="description" content="" />
        <meta name="author" content="Choongang31" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
       <style>
           .colorRed{color:red;}
           .colorBlue{color:blue;}
           .larger{font-size:larger;}
           .border{
                   border-width:1px;
                   border-style:solid;
                   border-color:black;
           }
       </style>
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script>
        $(function(){
            $("h5").addClass("colorRed")
                   .addClass("larger");
            $("h5").removeClass("colorRed");
            //아레의 문장은 addClass("colorRed")와 동일 
            //.addClass(function(index,currentClass))
            $("h5").addClass(function(index,currentClass){
                console.log("index?",index);
                console.log("currentClass?",currentClass);
                if(index==0) return "colorRed";
                if(index==1) return "colorBlue";   
             });
             //:header Selector
            $(":header").click(function(a,b){
                console.log("a",a);
                console.log("b",b);
                //undefined :없다는 뜻 
                console.log("this clicked",this);
            });
            $("h5").removeClass(function(i,cc){
                console.log("i",i);
                console.log("cc",cc);
                //.indexOf("x") 는 x의 위치를 return 합니다.
                //만약 없으면 -1을 return합니다.
                if(cc.indexOf("colorBlue")!=-1){
                   
                    return "colorBlue";
                };
                //있으면 true 없으면 false 
                hasRed=$(this).hasClass("colorRed")
                console.log("hasRed",hasRed);
                 if(hasRed){ //true 면 실행 
                     $(this).css("font-size","2em");
                     return "colorRed";
                 }else{
                     $(this).css("font-size","7em");
                     
                 };           
               $("h5").bind("click",function(){
                   //클릭할때마다 class를 넣다 뺐다 합니다.
                   //true면 add만 되도록  false면 remove만 되도록 
                   $(this).toggleClass("colorRed",false);
                   
               });
               //c는 옵션 넣어도되고 않넣어도 된다.
               //$(selector).action(a,b[,c]);
               $("h6").toggleClass(true);
               $("h6").click(function(){
                   $(this).addClass("colorRed");
               });
               $("h5").toggleClass(function(index,cls,s){
                   //순서 
                   console.log("index",index);
                   //현재 클래스 
                   console.log("cls",cls);
                   //true,false중 무엇이 걸려있는가.
                   console.log("s",s);
                   if(s==true){return "colorBlue"}
                   //colorRed가 없으면 전부 colorRed로 된다.
                   //colorRed이면 없어진다.
                   return "colorRed";
               });
               $("h4").click(function(){
                   $("h4").toggleClass("colorBlue");    
              // });
               //복사해 보자 --- 이동합니다.
              // $("h4").click(function(){
               //$("h4").appendTo("div");
               //변수가 object이면 $를 붙이는 경우가 많다.
               //데이터와 이벤트까지 복제하려면 true
               //child의 데이터와 이벤트까지 복제하려면 true,true 
               $clone=$(this).clone(true,true);
               $clone.appendTo("div");
               });
               
               $("div").wrap("</hr>");
               //$("div").wrap("</h4>");
               //$("h4")의 클론을 생성해서 div를 감싼다.
               $("div").wrap($("h4"));  //Selector
               brObject=document.createElement("br");
               $("div").wrap(brObject);  //object
               
               $("h5").wrap(function(index){
                   console.log("h5 index",index);
                   //h5(중에 3번째것)를 나 자신으로 감사라
                   if(index==2) return this;
               });
               //this method does not accept amy argumemt
               //위에 hr로 div를 감쌋는데 unwrap하자 
               $("div").unwrap();
               $("div").unwrap();
               //각각의 h5를 모두 ".border"로 감싸기 
              // $("h5").wrap(".border");
               //h5들을 한꺼번에 ".border"로 감싸기 
               $("h5").wrapAll(".border");
               //h4의 내용을 "<hr>"로 감싸라 
               $("h4").wrapInner("<hr>");
               $("h4").wrapInner(function(index){
                   //h4가 여러개 있을떄 
                   if(index==2){return "<br>"}
               });
               //insert 시키는데 대상의 안쪽 끝으로 들어간다.
               //.append(content[,content])
               $("div").append("<div>Hello Div</div>"
               ,"<div>good night</div>"
               ,"<div>잘자라 </div>");
               
               $("h6").append(function(index,html){
                   console.log("index",index);
                   console.log("html","원래 있던 문자열",html);
                   if(index==0)
                   return "<i>이것을 어펜드!!</i>";
               });
               
               //.appendTo(target)
               //h6 를  h4 에 끝에 child 로 insert 
               $("h6").appendTo("h4");
               // 대상의 내용을 가져오기 
               var spanHtml=$("span").html();
               console.log("spanHtml",spanHtml);
               //.html(htmlString)   대상의 내용을 셋팅하기 
               $("b").html("b를 셋팅하기 ");
               
               //.text()  대상의 text를 가져오기 
               var spanText=$("span").text();
               console.log("spanText",spanText);
               
               $("i").text("iiii로 셋팅하기 ");
               //.text 는 문자를 그대로 출력하고 
               $("i").text("<b>로 <br> 셋팅 하기</br> ");
               //.html 은 문자를 오브젝트로 봅니다.
               $("i").html("<b>로 <br> 셋팅 하기</br> ");
            });
            
            
            
            
        });
        
        
        
        </script>
    </head>
            
    <body>
           <span> span
               <b> b bold</b>
               <i> i italic</i>
           </span>
            <h4>h4 this will be toggle</h4>
            <h5>h5</h5>
            <h5>h5 second</h5>
            <h5>h5 third</h5>
            <div class="border">div</div>
            <h6>h6</h6>
       
       
       
       
       
       
       
    </body>
</html>
